<!--
 * @Author: your name
 * @Date: 2021-06-26 13:21:35
 * @LastEditTime: 2023-08-01 18:02:19
 * @LastEditors: pmy
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\components\theOne\topTitleDom.vue
-->
<template>
  <div class="topTitleDom" :class="{ topTitleDom_close: isPackUp }">
    <img src="@/assets/img/nav/shrink.png" style="margin:0 2rem;cursor:pointer" @click="updateIsPackUp"
      :style="{ transform: isPackUp ? 'rotate(180deg)' : 'rotate(0deg)' }" :title="isPackUp ? '展开' : '收起'">
    <ul class="top-menu">
      <li @click="selectMenuFirst(v)" v-for="v in MenuList" :key="v.index" :class="{ active: isActiveMenu(v) }">{{ v.name
      }}
      </li>
    </ul>
    <!-- 顶部菜单栏的右侧小菜单 -->
    <div class="rightList">
      <img v-if="!fullScreen" class="fullScreen" @click="updateScreen" src="@/assets/img/nav/fullScreen.png" title="全屏" />
      <img v-else class="fullScreen" @click="updateScreen" src="@/assets/img/nav/unFullScreen.png" title="退出全屏" />
      <div class="userName">{{ userData.personName }}</div>
      <el-popover placement="bottom" :width="100" trigger="hover" popper-class="dropdown-popover">
        <template #reference>
          <img class="userImg" src="@/assets/img/nav/user.png" title="修改密码" />
        </template>
        <ul class="my-dropdown">
          <li @click="updataUserPassword"><i class="icon el-icon-lock"></i>密码修改</li>
          <li @click="exitSystem"><i class="icon el-icon-switch-button"></i>退出登录</li>
        </ul>
      </el-popover>
      <div class="divider-line"></div>
    </div>
    <el-dialog :visible="resetPasswordVisible" :append-to-body="true" :close-on-click-modal="false" width="25%"
      :show-close="false" top="25vh" class="resetPwd">
      <template #title>
        <div class="headTitle">
          <div class="rectangle"></div>
          <span>修改密码</span>
          <div class="closeBtn" title="关闭" @click="resetPasswordVisible = false"></div>
        </div>
      </template>
      <el-form label-width="12rem" :rules="resetRules" ref="resetRef" label-position="left" :model="resetInfo">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="resetInfo.oldPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="请输入密码" prop="passwordTest">
          <el-input v-model="resetInfo.passwordTest" show-password></el-input>
        </el-form-item>
        <el-form-item label="再次确认密码" prop="newPassword">
          <el-input v-model="resetInfo.newPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <div class="submitBtn" @click="resetPassword"></div>
    </el-dialog>
  </div>
</template>
<script>
import screenfull from "screenfull";
import dayjs from "dayjs";
import { Logout, service } from "@/services/backServices"
export default {
  name: "topTitleDom",
  data() {
    let pwdResetValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetInfo.passwordTest) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    let passwordValidate = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        let MyRegExp =
          /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[#?@!$%^&*-]).{8,}$/; //小数点左边最高16位，小数点右边最多4位
        if (MyRegExp.test(value) == false) {
          callback(
            new Error("密码要求长度8位以上、包含大小写字母、数字和特殊符号")
          );
        } else {
          //校验通过
          callback();
        }
      }
    };
    return {
      fullScreen: false,
      nowTime: dayjs().format("MM-DD HH:mm"),
      timeCounter: null,
      tabIndex: 0,
      resetPasswordVisible: false,
      resetInfo: {},
      resetRules: {
        // 原密码
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        // 新密码-1
        passwordTest: [
          { required: true, validator: passwordValidate, trigger: 'blur' },
        ],
        // 新密码-2
        newPassword: [
          { required: true, validator: pwdResetValidate, trigger: 'blur' }
        ],
      },
      districtForm: {
        province: {},
        city: {},
        county: {},
      },
      districtData: {}, //储存查询到的区域数据
      optionLists: {
        province: [],
        city: [],
        county: [],
        mapFlushSequence: []
      },
      showProvince: false
    };
  },
  created() {
    window.addEventListener("keydown", this.KeyDown, true);
    // 监听页面是否全屏
    screenfull.on("change", () => {
      this.fullScreen = screenfull.isFullscreen;
    });
  },
  computed: {
    //获取用户信息
    userData() {
      return this.$store.state.currentUser;
    },
    //是否收缩菜单栏
    isPackUp() {
      return this.$store.state.isPackUp;
    },
    MenuList() {
      let List = this.$store.state.availableMenuList;
      return List;
    },
    activeMenu() {
      return this.$store.state.activeMenu;
    },
    isPackUp() {
      return this.$store.state.isPackUp;
    },
    systemTitle() {
      if (this.userData?.companyName)
        return this.userData?.companyName
      else
        return "丝宝电商数据分析平台";
    },
  },
  methods: {
    //全屏
    updateScreen() {
      screenfull.toggle();
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false
        this.updateScreen()   //触发全屏的按钮
      }
    },
    objectToFormData(obj) {
      var formData = new FormData();
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          formData.append(key, obj[key]);
        }
      }
      return formData;
    },
    resetPassword() {
      let { passwordTest, ...model } = this.resetInfo
      this.$refs.resetRef.validate(async (valid) => {
        if (valid) {
          const { data } = await service({
            url: "/resetPassword",
            method: "post",
            data: this.objectToFormData(model)
          });
          if (data.code == 200) {
            this.$notify({
              message: "修改密码成功！",
              type: "success",
              position: "bottom-right",
              duration: 2000,
            });
            this.resetPasswordVisible = false;
            this.resetInfo = {};
          }
        }
      })
    },
    updataUserPassword() {
      this.resetPasswordVisible = true
    },
    //系统退出方法
    exitSystem() {
      localStorage.setItem("token", "");
      window.location.href = "/"
      // Logout().then((response) => {
      //   if (response) {
      //     this.$router.push({ path: "/" });
      //     this.$store.state.activeMenu = ''
      //   } else {
      //     this.$notify({
      //       message: "退出失败",
      //       type: "error",
      //       position: "bottom-right",
      //       duration: 1000,
      //     });
      //   }
      // });
    },
    isActiveMenu(value) {
      let _this = this;
      const _activeBool = value.children.some(v => {
        return v.index === _this.activeMenu
      })
      return _activeBool
    },
    updateIsPackUp() {
      this.$store.dispatch("updateIsPackUp", !this.isPackUp);
    },
    selectMenuFirst(value) {
      this.$store.dispatch("updateActiveMenu", value.children[0].index);
    },
  }
};
</script>

<style lang="less" scoped>
.resetPwd {
  ::v-deep .el-dialog__header {
    padding: 0px;
  }

  ::v-deep .el-input {
    width: 300px;
  }

  .submitBtn {
    background: url("../../assets/img/table/submit.png") no-repeat center;
    background-size: 100% 100%;
    width: image-width("../../assets/img/table/submit.png");
    height: image-height("../../assets/img/table/submit.png");
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;

    &:hover {
      background: url("../../assets/img/table/submit-1.png") no-repeat center;
      background-size: 100% 100%;
    }
  }

  .headTitle {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e4e7ed;
    text-align: left;
    padding-left: 20px;
    color: #262626;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(79, 125, 247, 0.12) 0%,
        rgba(0, 0, 0, 0) 100%),
      #ffffff;
    font-size: 14px;

    .closeBtn {
      position: absolute;
      right: 14px;
      top: 10px;
      cursor: pointer;
      background: url("../../assets/img/table/closeBtn.png") no-repeat center;
      background-size: 100% 100%;
      width: image-width("../../assets/img/table/closeBtn.png");
      height: image-height("../../assets/img/table/closeBtn.png");

      &:hover {
        background: url("../../assets/img/table/closeBtn-1.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .rectangle {
      display: inline-block;
      position: relative;
      top: 3px;
      margin-right: 5px;
      width: 5px;
      height: 16px;
      background-color: #4f7df7;
    }
  }
}

.showFunc {
  display: none;

  @media (min-width: 1280px) {
    display: block;
  }
}

.topTitleDom {
  position: absolute;
  right: 0;
  top: 0;
  left: 230px;
  z-index: 3;
  text-align: left;
  background: #fff;
  display: flex;
  justify-content: left;
  align-items: center;
  height: 60px;
  font-size: 14px;

  .top-menu {
    color: #424242;

    li {
      display: inline-block;
      width: 90px;
      line-height: 36px;
      text-align: center;
      cursor: pointer;

      &.active {
        background-color: #e5efff;
        color: #0066ff;
        border-radius: 4px;
      }
    }
  }

  .rightList {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 60px;
    width: 40%;

    .icon {
      display: inline-block;
      height: 24px;
      width: 24px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      // &.icon-user {
      //   height: 24px;
      //   width: 24px;
      //   background-image: url("../assets/image/nav/user.png");
      //   margin: 0 20px;
      //   &:hover {
      //     background-image: url("../assets/image/nav/user_hover.png");
      //   }
      // }
    }

    .exit {
      float: right;
      z-index: 1;
      cursor: pointer;
    }

    .fullScreen {
      float: right;
      z-index: 1;
      cursor: pointer;
      .showFunc();
    }

    .userName {
      float: right;
      color: #afb2be;
      margin-right: 20px;
      .showFunc();
    }

    .userImg {
      float: right;
      display: none;
      cursor: pointer;
      .showFunc();
    }

    .replyImg {
      float: right;
      background: url("../../assets/img/nav/reply.png") no-repeat center;
      width: image-width("../../assets/img/nav/reply.png");
      height: image-height("../../assets/img/nav/reply.png");
      cursor: pointer;
      .showFunc();
    }

    .alarmImg {
      float: right;
      background: url("../../assets/img/nav/alarm.png") no-repeat center;
      width: image-width("../../assets/img/nav/alarm.png");
      height: image-height("../../assets/img/nav/alarm.png");
      cursor: pointer;
      .showFunc();
    }

    .divider-line {
      width: 1px;
      background-color: #ebebeb;
      height: 34px;
      margin: 13px 20px;
      float: right;
    }

    .angelMark {
      position: relative;
      left: 36px;
      top: 12px;
      height: 12px;
      width: 20px;
      border-radius: 24px;
      background: red;
      line-height: 12px;
      font-size: 12px;
      color: #fff;
      text-align: center;
    }
  }
}

.topTitleDom_close {
  left: 64px;
}

.frame {
  margin-top: 15px;
  margin-left: 25px;

  .el-form-item {
    ::v-deep .el-form-item__content {
      width: 130px;
    }

    .el-input {
      width: 130px;
    }

    .el-select {
      width: 130px;
    }
  }
}
</style>
